<template>
    <div class="echart" id="devicechart" :style="myChartStyle"></div>
  </template>

  <script>
  import * as echarts from "echarts";

  export default {
    data() {
      return {
        xData: [23, 24, 18, 25], //数据
        yData: ["在线","故障","启用","离线"], //Y坐标
        myChartStyle: { float: "left", width: "100%", height: "300px" } //图表样式
      };
    },
    mounted() {
      this.initEcharts();
    },
    methods: {
      initEcharts() {
        // 基本柱状图
        const option = {
          xAxis: {
          },
          yAxis: {data: ["在线","故障","启用","离线"]},
          series: [
            {
              type: "bar", //形状为柱状图
              data: [23, 24, 18, 25]
            }
          ]
        };
        const myChart = echarts.init(document.getElementById("devicechart"));
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    }
  };
  </script>

